4.4 What to style?

Motivations

Colors - Read all in CSS Colors.
The CSS box model
- List the four components.
- Content - The related properties are ...
  - width
  - height
  - You can change the width and height of block-type elements with the above properties.
  - Can you change the width and height of an inline-type element, such as <a> and <span>?
    - You can use the display type, 'inline-block'.
    - Trial 1: Let's try to change the width and height of a <span> element.
      <span>What a</span> <span style='???:???; width:100px; height:100px; background-color:LightYellow; ???:1px solid blue; padding-left:50px;'>wonderful</span> <span>world!</span>
- Padding - The related properties are ...
  - padding
  - padding-top, padding-bottom, padding-left, padding-right
  - The above properties can be used for inline-type elements as well.
  - Here are examples - CSS Padding.
- Border - The related properties are ...
  - border
  - border-width, border-style, border-color, border-radius
  - Here are examples - CSS Border.
- Margin - The related properties are ...
  - margin
  - margin-top, margin-bottom, margin-left, margin-rigth
  - Here are examples - CSS Margin.
  - What margin value is used to horizontally center an element within its container? 'auto'; We will discuss the centering in detail later.
- Background - The related properties are ...
  - background-color
  - background-image, background-repeat
  - Here are examples - CSS Background.
- How about outside the borders? This area is called 'outline'. The related properties are ...
  - outline
  - outline-color, outline-style, outline-width
  - Here are examples - CSS Outlines.
  - Note. Outline does not change the margin space.
- Trial 2: Let's try to change padding, border, margin, background color of a <div>. padding:10px; margin:10px, border: solid, 5px, Blue; background color: LightGreen
  <???> div??? { ??? outline-width:5px; outline-style:solid; outline-color: Purple; } <???> <div id='tr2'> <p style='border:1px solid black; background-color:LightYellow; width:300px; height:50px'> If you wish more, you will get more. If you wish less, you will get less. </p> </div>
What can you do with text?
- color
- Font related ...
  - font-family
  - font-size
  - font-style
  - font-weight
  - ...
- text-align
- text-indent
- text-overflow
- ...
- Trial 3: Let's try to change text color and alignment.
  <???> div??? { ??? } /* the first <p>: left; Blue color */ div??? { ??? } /* the second <p>: center; Green color */ div??? { ??? } /* the third <p>: right */ <???> <div id='tr3'> <p id='left' style='border:1px solid black; background-color:LightYellow; width:400px'> If you wish more, you will get more. If you wish less, you will get less. </p> <p id='center' style='border:1px solid black; background-color:LightYellow; width:400px'> What a wonderful day! </p> <p id='right' style='border:1px solid black; background-color:LightYellow; width:400px'> What a great life! </p> </div>
What happens if content overflows an element's box?
- Read all in CSS overflow Property.
- overfolow, overflow-y, overflow-x - Note that you should fix the height and width.
- hidden, scroll, auto
Click to see something different from the previous examples!
- What do you need to use to display the box at the horizontal center and at the bottom?
- How can you show and hide?
- Is the expanded box displayed over all the others?
Here is another very interesting example.
- Menu for an application, TruQA:
  - - Sign In
    - Join
    - Forgot Password
- In the following sections, we will study show/hide, positioning, and overlapping.

Learning outcomes
- Use of all the CSS properties related to the box model

Welcome!

Sign In

4.4 What to style